<template>
	<view class="bg-white">
		<scroll-view style="height: 100vh;" scroll-y @scrolltolower="loadMoreData">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">
					<view class="flex justify-center" style="pointer-events: all;">
						<text style="font-size: 30rpx;">
							搜索
						</text>
					</view>
				</block>
			</cu-custom>
			<view style="padding: 0 40rpx;">
				<view class="cu-bar search" style="padding:20rpx 0;border-bottom: 2rpx solid #a2a2a2;">
					<view class="search-form round" style="padding-left: 20rpx;padding-right: 20rpx;">
						<input :adjust-position="false"  placeholder="搜索课程、文章、讲书" v-model="keyStr"
							confirm-type="search" @keydown.enter="search"></input>
						<text class='cuIcon-roundclose text-gray' style="font-size: 30rpx;" v-show="keyStr"
							@click="keyStr=''"></text>
						<text class="cuIcon-search" @click="search" style="font-size: 30rpx;"></text>
					</view>
				</view>
				<!-- 搜索结果展示 -->
				<!-- 文章 -->
				<view v-show="columnType==0 || columnType==1">
				<text v-show="articleArray.length" style="font-size: 18px;font-weight: bold;color: #7f7f7f;line-height: 24px;">
					文章
				</text>
				<view v-for="(art,index) in articleArray" :key="'art'+index"  style="margin: 30rpx 0;" @click="$Router.push({name:'article',params:{id:art.id}})">
						<view>
						<!-- 标题 -->
						<rich-text :nodes="art.title" style="font-weight: 600;font-size: 36rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"></rich-text>
						</view>
						<!-- 正文 -->
						<view class="flex justify-between">
							<rich-text
								style="word-break: break-all; flex:1; overflow: hidden;height: 180rpx;line-height: 60rpx;"
								:nodes="art.content"></rich-text>
							<view v-if="art.imglist.length==1" style="width: 220rpx; height: 180rpx;margin-left: 20rpx;">
								<image :src="art.imglist[0]" mode="aspectFill" style="width: 100%;height: 100%;">
								</image>
							</view>
						</view>
						<!-- 多张图片 -->
						<view v-if="art.imglist.length>1" class="flex  margin-top margin-bottom-xs ">
							<view v-for="(img,index3) in art.imglist" :key="index3"
								style="width: 250rpx; height: 125rpx;">
								<image :src="img" mode="aspectFit" style="width: 100%;height: 100%;"></image>
							</view>
						</view>
						<view class="flex align-center">作者:<rich-text :nodes="art.userName"></rich-text></view>
				</view>
				</view>
				<!-- 课程 -->
				<view v-show="columnType==0 || columnType==2">
				<view v-show="courseArray.length" style="font-size: 18px;font-weight: bold;color: #7f7f7f;line-height: 24px;border-top: 2rpx solid #a2a2a2;">
					课程
				</view>
				<view v-for="(course,index) in courseArray" :key="'course'+index" class="flex " style="margin: 30rpx 0;"  @click="$Router.push({name:'courseDetail',params:{id:course.id}})">
					<!-- 封面 -->
					<view  class="margin-right" >
						<image :src="course.cover" mode="aspectFill" style="height: 280rpx;width: 200rpx;"> </image>
					</view>
					<!-- 课程基本信息 -->
					<view class="flex flex-direction flex-sub" style="position: relative;" >
						<!-- 题目、书名 -->
						<rich-text 
						style="display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;font-weight: 600; font-size: 36rpx;;overflow: hidden;text-overflow: ellipsis;" :nodes="course.title"></rich-text>
						<!-- 描述信息 -->
						<rich-text :nodes="course.description" style=" 
						display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;overflow:hidden;line-height: 60rpx;"></rich-text>
						<!-- 作者 -->
						<view style="position: absolute;bottom: 0%; " class="flex align-center">
							作者：<rich-text :nodes="course.userName"></rich-text>
						</view>
					</view>
					
				</view>
				 </view>
		        <!-- 讲书 -->
				<view v-show="columnType==0 || columnType==4">
				<view v-show="bookArray.length" style="font-size: 18px;font-weight: bold;color: #7f7f7f;line-height: 24px;border-top: 2rpx solid #a2a2a2;">
					讲书
				</view>
				<view v-for="(book,index) in bookArray " :key="'book'+ index" style="margin: 30rpx 0;"  @click="$Router.push({name:'bookDetail',params:{id:book.id}})">
					<view class="flex">
					<view  class="margin-right" >
						<image :src="book.cover" mode="aspectFill" style="height: 280rpx;width: 200rpx;"> </image>
					</view>
					<view class="flex flex-direction flex-sub" style="position: relative;">
					  <rich-text :nodes="book.title" style="font-weight: 600; font-size: 36rpx;"></rich-text>
					  <rich-text :nodes="book.description" style="display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;overflow:hidden;line-height: 60rpx;"></rich-text>
						<!-- 作者 -->
						<view style="position: absolute;bottom: 0%; " class="flex align-center">
							作者：<rich-text :nodes="book.userName"></rich-text>
						</view>
					</view>
					</view>
					<rich-text :nodes="book.content" class="book-content" ></rich-text>
				</view>
				</view>
				<load-more :status="loadMoreStatus"></load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import loadMore from '../../components/mine/loadMore.vue';
	export default {
		data() {
			return {
				loadMoreStatus:0,//加载数据状态
				keyStr: '',
				currentKey:'',//加载更多数据需要现存关键词
				pageNo: 0,
				pageSize: 4,
				articleArray: [],
				courseArray: [],
				bookArray: [],
                columnType:this.$Route.query.columnType?this.$Route.query.columnType:0
			}
		},
		components: {
			loadMore
		},
		onLoad() {
			console.log(this.columnType)
		},
		
		methods: {
			loadMoreData(){
				if(!this.currentKey || this.loadMoreStatus==2){
					return;
				}
				this.pageNo++
				this.loadMoreStatus=1
				
				this.$http.get(`/edu/es/searchSelectDoc/test/${this.currentKey}/${this.pageNo}/${this.pageSize}`).then(res =>{
					if(res.data.result.length){
						let tmp=this.getSearchData(res.data.result)
						this.articleArray.push(...tmp.article)
						this.courseArray.push(...tmp.course)
						this.bookArray.push(...tmp.books)
						this.loadMoreStatus=0
					}
					else{
						this.loadMoreStatus=2
					}
				})
			},
			search() {
				// 新的关键词页码从零开始
				this.pageNo=0
				this.$http.get(`/edu/es/searchSelectDoc/test/${this.keyStr}/0/${this.pageSize}`).then(res => {
					console.log(res)
					let tmp=this.getSearchData(res.data.result)	
					this.articleArray=tmp.article
					this.courseArray=tmp.course
					this.bookArray=tmp.books
					// 设置现存关键词
					this.currentKey=this.keyStr
				})
			},
			getSearchData(res){
				let article=[]
				let books=[]
				let course=[]
				res.forEach(item =>{
					if(item.columnType=='1'){
						article.push(item)
					}
					if(item.columnType=='2'){
						course.push(item)
					}
					if(item.columnType=='4'){
						books.push(item)
					}
				})
				article.forEach((item, index) => {
					item["imglist"] = item.cover.split(",")
					
					delete item.cover
				})
				books.forEach(item =>{
					item.description="描述："+item.description
				})
				// 返回处理后的新数组
				return{
					article,course,books
				}
			}
		}
	}
</script>

<style>
	.book-content{
		display: -webkit-box;
		 -webkit-box-orient:vertical; 
		 -webkit-line-clamp:2;
		 overflow:hidden;
		 line-height: 60rpx;
	}
</style>
